<template>
  <div>
    <!-- 请手写v-model的原理 -->

    <!-- <input type="text" :value="msg" @input="msg = $event.target.value" /> -->
    <!-- <input type="checkbox" :checked="msg" @change="msg = $event.target.checked" /> -->

    <!-- 
      v-model是一个语法糖（连招）方便于开发者快速 将数据和表单元素双向绑定
      原理：（针对于不同的表单元素，vue底层会让v-model实现不同的绑定和事件监听）
        1. :value 和 @input 的组合  (默认情况)
           <input type="text" v-model="msg">
           <input type="text" :value="msg" @input="...">

        2. :value 和 @change 的组合
           <input type="text" v-model.lazy="msg">
           <input type="text" :value="msg" @change="...">

        3. :checked 和 @change 的组合
           <input type="checkbox" v-model="flag">
           <input type="text" :checked="flag" @change="...">

           模板中使用 $event 可以获取 事件的形参，因为是原生input事件，所以形参是事件对象
     -->
    <!-- <h3>:value 和 @input组合</h3> -->
    <!-- <input type="text" v-model="msg" /> <br /> -->
    <input type="text" :value="msg2" @input="msg2 = $event.target.value" />

    <hr />

    <!-- <h3>:value 和 @change组合</h3> -->
    <!-- 简易写法：<input type="text" v-model.lazy="desc" /> -->
    <!-- <input type="text" :value="desc" @change="desc = $event.target.value" />

    <hr /> -->

    <!-- <h3>:checked 和 @change组合</h3> -->
    <!-- 简易写法：<input type="checkbox" v-model="flag"> -->
    <!-- <input
      type="checkbox"
      :checked="flag"
      @change="flag = $event.target.checked"
    /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'abc',
      msg2: 'bcd',
      desc: '描述',
      flag: true
    }
  },
  methods: {
    // handleInput (e) {
    //   // console.log(e.target.value) 视图修改了，拿到输入框的值，修改数据
    //   this.msg2 = e.target.value
    // }
    // inputEvent(e) {
    //   console.log('input事件被触发')
    //   console.log(e.target.value)
    //   //修改了input框就要修改data当中的值
    //   this.msg2 = e.target.value
    // }
  }
}
</script>

<style>
</style>